<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <title>地图显示</title>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript">
        // 使用JSAPI必须搭配密钥
        window._AMapSecurityConfig = {
            // securityJsCode: 'de3dabd1ba7ffd802aac72c468609ef5',
            securityJsCode: '0300bab869a7f4717dc44773bbb0f29e',
        }
    </script>
    <!-- 加载地图JSAPI脚本 -->
    <!--<script src="https://webapi.amap.com/maps?v=2.0&key=5e8e4187dd44bdb2f345d8f34d76bf0f&plugin=AMap.PlaceSearch,AMap.Geocoder"></script>-->
    <script src="https://webapi.amap.com/maps?v=2.0&key=5934931986b461f961460bb4b1cb5e32&plugin=AMap.Geocoder,AMap.PlaceSearch"></script>
    <script src="JsAPI.js"></script>
    <script>
        var map = new AMap.Map('container', {
            viewMode: '2D',
            zoom: 5, // 初始化地图层级
            center: [108.947404, 34.341036], // 初始化地图中心点
            isHotspot: true
        });

        // 添加比例尺
        map.plugin(["AMap.Scale"], function () {
            map.addControl(new AMap.Scale());
        });

        var geocoder = new AMap.Geocoder();     // 逆地理解码
        var rightClickPosition; // 鼠标右键点击位置
        var placeSearch = null;  //构造地点查询类
        var cityName = null;    // 当前城市名称
        var poiList = [];

        function init(info) {
            cityName = info["city"];
            placeSearch = new AMap.PlaceSearch({
                city: info["city"],
                cityLimit: true,
                extensions: 'all'
            });
            showPOIList(info["address"]);
        }

        // 地图初始化时展示POI列表
        function showPOIList(addressList) {
            poiList = addressList;
            addressList.forEach(function (element) {
                var iconUrl;
                switch (element["type"]) {
                    case "必吃":
                        iconUrl = "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png";
                        break;
                    case "景区":
                        iconUrl = "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png";
                        break;
                    case "必逛":
                        iconUrl = "./marker_g.png";
                        break;
                    default:
                        iconUrl = "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png";
                        break;
                }
                var marker = new AMap.Marker({
                    position: new AMap.LngLat(element["lng"], element["lat"]),
                    title: element["name"],
                    map: map,
                    icon: iconUrl
                });
                marker.on('click', markerClickCallBack);
                map.add(marker);
                map.setFitView();
            });
        }

        function showPOI(address) {
            map.clearMap();
            const filteredList = poiList.filter(obj => obj["name"] === address["name"]);
            const poi = filteredList[0];
            var iconUrl;
            switch (address["type"]) {
                case "必吃":
                    iconUrl = "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png";
                    break;
                case "景区":
                    iconUrl = "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png";
                    break;
                case "必逛":
                    iconUrl = "./marker_g.png";
                    break;
                default:
                    iconUrl = "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png";
                    break;
            }
            var marker = new AMap.Marker({
                position: new AMap.LngLat(poi["lng"], poi["lat"]),
                title: address["name"],
                map: map,
                icon: iconUrl
            });
            marker.on('click', markerClickCallBack);
            map.add(marker);
            map.setFitView();
        }

        function searchAddress(address) {
            map.clearMap();
            placeSearch.search(address, function (status, result) {
                var poi = result.poiList.pois[0];
                var marker = new AMap.Marker({
                    position: poi.location,
                    title: poi.name,
                    map: map,
                    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png"
                });
                marker.on('click', markerClickCallBack);
                map.add(marker);
                map.setFitView();
            });
        }

        //const info = {
        //    city: "武汉市",
        //    address: [
        //        {
        //            name: "黄鹤楼",
        //            type: "景区",
        //            lng: 114.302467,
        //            lat: 30.544649
        //        },
        //        {
        //            name: "喜舍",
        //            type: "必吃",
        //            lng: 114.302026,
        //            lat: 30.586271
        //        }]
        //}
        //init(info);

        //searchAddress("武汉大学");

        //showPOI({
        //    name: "黄鹤楼",
        //    type: "景区",
        //    lng: 114.302467,
        //    lat: 30.544649
        //})

        function markerClickCallBack(e) {
            window.ViewModel.setCurrentPOI(e.target.getTitle());
        }

    </script>
</body>
</html>